.article {
  color: @color_text_main;
  font-size: @fontsize_base;
  line-height: @lineheight_base;
  word-break: break-all;
  word-wrap: break-word;
  img {
    position: relative;
    margin: 0 auto;
    background: white;
    .enable-trans();
    @media (max-width: @on_phone) {
      box-shadow: none;
    }
  }
  span{
    img {
      display: inline;
      margin: auto;
    }
  }
  .aplayer{
    margin: 0;
    display: inline-block;
    width: 400px;
    max-width: 100%;
    border-radius: 4px;
    color: #666;
    font-family: @fontfamily_base;
  }
  p.small-img,
  div.small-img {
    img {
      width: auto;
      max-width: 100%;
      margin: 0;
      box-shadow: none;
    }
  }
  p {
    // margin: 20px 0px;
    margin-top: .5em;
    margin-bottom: 1em;
    text-align: justify;
    strong{
      color: @color_text_main;
      padding-left: 2px;
      padding-right: 2px;
    }
    max-width: 100%;
    overflow: auto;
    .mjx-math{
      font-family: @fontfamily_code;
      background: fade(@theme_background, 50%);
      padding: @gap/2;
      border-radius: @border_radius_code_block;
    }
  }
  ul,
  ol {
    font-size: @fontsize_base * .95;
    list-style: initial;
    padding-left: 10px;
    margin-left: 10px;
    margin-bottom: 1em;
    &.center{
      justify-content: center;
    }
    &.pure{
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      br{
        display: none;
      }
      @media screen and (max-width: 900px){
        justify-content: space-between;
      }
      li{
        margin: 8px;
        display: flex;
        width: 75px;
        flex-direction: column;
        align-items: stretch;
        vertical-align: middle;
        text-align: center;
        font-size: .8em;
        line-height: 1.2em;
        overflow: hidden;
        a{
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

        img{
          margin-bottom: 8px;
        }

      }
      &.rounded{
        img{
          border-radius: 25%;
        }
      }

      &.circle{
        img{
          border-radius: 50%;
        }
      }
      &.about{
        @media screen and (max-width: 900px){
          justify-content: center;
        }
      }
    }
  }
  ul {
    & > li{
      list-style: initial;
    }

  }
  ol {
    & > li{
      margin-left: 10px;
      list-style: decimal;
    }
  }
  a {
    &:before{
      display: none;
    }
    color: @color_text_link;
    .enable-trans();
    &:hover {
      color: @color_text_highlight;
      text-decoration: underline;
    }
    &:active {
      color: darken(@color_text_highlight, 25%);
    }
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    position: relative;
    font-family: @fontfamily_base;
    font-weight: normal;
    margin-top: 1.5em;
    margin-bottom: 1em;
    &.title {
      left: 0;
      &:before {
        content: none;
      }
    }
  }
  h1, h2 {
    color: @color_text_header;
    margin-top: 2em;
  }
  h3, h4, h5, h6 {
    &:first-child{
      margin-top: 0;
      padding-top: 0;
    }
  }
  h1 {
    font-size: @fontsize_h1;
  }
  h2 {
    font-size: @fontsize_h2;
    text-align: @text_align_h2;
  }
  h3 {
    font-size: @fontsize_h3;
    color: @color_text_h3;
    text-align: @text_align_h3;
  }
  h4 {
    font-weight: bold;
    font-size: @fontsize_h4;
  }
  h5 {
    font-weight: bold;
    color: @color_text_main;
    font-size: @fontsize_h5;
  }
  h6 {
    color: fade(@color_text_main, 75%);
    font-size: @fontsize_h6;
  }
  .subtitle{
    h6 {
      color: fade(@color_text_main, 90%);
    }
  }
  figure {
    figcaption {
      span {
        display: inline-block;
        margin-right: 5px;
      }
    }
  }
  blockquote {
    p{
      text-align: left;
      word-wrap: normal;
      margin: 0;
      font-size: @fontsize_small;
      line-height: @fontsize_small * 1.5;
    }
    position: relative;
    width: 100%;
    font-size: @fontsize_small;
    background: fade(@color_bg_quote, 10%);
    margin: 1em 0;
    padding: @gap;
    border-left: @border_radius_code_block solid @color_bg_quote;
    border-radius: @border_radius_code_block;
    .enable-trans();
    footer {
      strong {
        margin-right: 7px;
      }
    }
    &.pullquote{
      &.right{
        border-left: none;
        border-right: @border_radius_code_block solid @color_bg_quote;
        p{
          text-align: right;
        }
      }
    }
  }

  pre {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: @fontfamily_code;
    color: @color_text_main;
  }
  code {
    font-family: @fontfamily_code;
    padding: 3px 3px 0px 3px;
    margin: 0px 2px;
    vertical-align: center;
    border-radius: 2px;
    // border: 1px solid fade(@color_bg_code, 50%);
    font-size: @fontsize_base * .8;
    // background: @color_bg_code;
    color: #666;
    @media(max-width: @on_phone){
      font-size: @fontsize_base * .8 * .95;
    }
  }
  .readmore {
    // display: none; // howtodesign?
    font-family: @fontfamily_base;
    font-size: .8em;
    letter-spacing: .1em;
    margin-top: @gap;
    a {
      text-decoration: none;
      display: inline-block;
      vertical-align: middle;
      line-height: 2rem;
      font-weight: bold;
      background-color: @theme_main;
      padding: .2em 2.4em;
      color: @color_text_in_header;
      border-radius: @border_radius/2;
      .enable-trans();
      &:hover {
        background: darken(@theme_main, 10%);
      }
      &:active {
        // background: darken(@theme_main, 20%);
      }
    }

  }
  .tags {
    position: relative;
    padding-top: @gap/2;
    padding-bottom: @gap/2;
    font-size: @fontsize_small;
    line-height: @lineheight_base;
    margin-top: @gap;
    background: darken(fade(@theme_background, 50%), 5%);
    &.article-tags {
      // padding-top: 2*@gap;
      // background: transparent;
    }
    word-spacing: @gap/2;
    a {
      color: @color_text_main;
      position: relative;
      display: inline-block;
      word-spacing: 0;
      // letter-spacing: .1em;
      // &+a{
      //   margin-left: @gap/2;
      // }
      .enable-trans();
      &:hover {
        color: @color_text_highlight;
        background: transparent;
        text-decoration: none;
      }
      &::before {
          // content: "#";
      }
    }
  }

  table:not('.highlight table') {
    width: 100%;

    td,
    th {
      padding: 12px 24px;
    }
    tr {
      // border-bottom: 1px solid #ddd;
    }
    &>thead>th {
      // border-bottom-width: 2px;
    }
  }
  @media (max-width: @on_phone) {
    ul,
    ol {
      font-size: @fontsize_base * .95;
    }
    figure {
      font-size: 13px;
      line-height: 1.6em;
    }
  }
  .prev-next{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-content: flex-start;
    section{
      width: 100%;
      padding: @gap/2;
      color: fade(@color_text_main, 70%);
      background-color: fade(@theme_background, 50%);
      border-radius: @border_radius;
      p{
        font-size: @fontsize_base;
        line-height: @lineheight_base;
        margin: 0;
      }
      h4{
        margin-top: @gap/2;
        margin-bottom: @gap/2;
        position: relative;
        font-family: @fontfamily_base;
        font-weight: bold;
        font-size: @fontsize_h5;
        @media(max-width:@on_phone) {
          letter-spacing: -1px;
        }

      }
      h6{
        margin: 0;
        word-spacing: normal;
      }
      .enable-trans();
      // border: 1px solid transparent;
      // &:hover{
      //     border: 1px solid fade(@theme_main, 30%);
      // }
      .tags{
        background: transparent;
        padding: 0;
        margin-top: @gap/2;
        margin-bottom: 0;
        font-size: @fontsize_small * 0.9;
        word-spacing: 4px;
      }
      &:first-child{
        margin-left: 0;
        margin-right: 0;
      }
    }
    .prev{
      text-align: left;
      margin-left: 0;
      margin-right: @gap/2;
      border-top-right-radius: @border_radius;
      border-bottom-right-radius: @border_radius;
    }
    .next{
      text-align: right;
      margin-left: @gap/2;
      margin-right: 0;
      border-top-left-radius: @border_radius;
      border-bottom-left-radius: @border_radius;
    }

  }
}


.highlight {
  position: relative;
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1.2em;
  overflow: auto;
  display: block;
  background: @color_bg_code_block;
  font-size: @fontsize_small * .95;
  font-family:@fontfamily_code;
  line-height: @lineheight_base;
  border-radius: @border_radius_code_block;
  .enable-trans();
  figcaption{
    padding: @gap/4 @gap/2;
    background-color: darken(@color_bg_code_block, 3%);
  }
  table{
    td,th{
      padding: 0;
    }
  }
  .gutter{
    width: 24px;
    padding: 0 12px;
    text-align: right;
    border-width: 0;
    margin-left: 0;
    background-color: darken(@color_bg_code_block, 3%);
    pre{
        color: fade(@color_text_main, 80%);
    }
    &:hover{

    }
  }
  .code{
      padding: @gap;
      vertical-align: top;
      border: 0px solid darken(@theme_background, 2%);
      &:before{
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          color: fade(@color_text_main, 80%);
          font-size: @fontsize_footnote;
          padding: 4px 8px 0;
          line-height: @lineheight_base;
      }
  }

  &.html .code:before{
      content: "HTML";
  }
  &.js .code:before{
      content: "JS";
  }
  &.bash .code:before{
      content: "BASH";
  }
  &.shell .code:before{
      content: "SHELL";
  }
  &.css .code:before{
      content: "CSS";
  }
  &.less .code:before{
      content: "LESS";
  }
  &.swift .code:before{
      content: "SWIFT";
  }
  &.objc .code:before{
      content: "OBJECTIVE-C";
  }
  &.c .code:before{
      content: "C";
  }
  &.java .code:before{
      content: "JAVA";
  }
  &.python .code:before{
      content: "PYTHON";
  }
  &.plain .code:before{
      content: "";
  }

  &::-webkit-scrollbar {
    height: @border_radius_line;
    width: @border_radius_line;
  }
  // /* Track */

  &::-webkit-scrollbar-track-piece {
      background: transparent;
  }


/* Handle */

  &::-webkit-scrollbar-thumb {
    background: darken(@color_bg_code_block, 5%);
    cursor: pointer;
    border-radius: @border_radius_code_block;
    .enable-trans();
    &:hover {
      background: darken(@color_bg_code_block, 12%);
    }
  }

}

.article {
  @media (max-width: @on_phone) {
    .highlight {
      font-size: @fontsize_small * .95 * .95;
    }
  }
}

.art-item-footer{
    height: 40px;
    line-height: @lineheight_base;
    font-size: @fontsize_small;
    .art-item-left,.art-item-right{
        width:50%;
        height: 40px;
        line-height: 40px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .art-item-left{
        float: left;
        text-align: left;
    }
    .art-item-right{
        float: right;
        text-align: right;
    }
    @media (max-width: @on_phone) {
      font-size: @fontsize_small * .95 * .95;
    }
}

@hl_keyword: #9c27b0;
@hl_blue: #1E80F0;
@hl_cyan: #17AFCA;
@hl_green: #3FA33F;
@hl_light_blue: #6ECDF9;
@hl_red: #EE2B29;
@hl_orange: #FB3F1B;
@hl_amber: #FD8607;

pre{
  // 行
  .line{
  }
  .marked{
    background-color: fade(@color_mac_minimize, 20%);
    border-radius: 2px;
    border: 1px solid fade(@color_mac_minimize, 40%);
  }
  // 注释
  .comment, .title{
    color: fade(@color_text_main, 60%);
  }
  .keyword, .javascript .function, .attr {
    color: @hl_keyword;
  }
  .type, .built_in, .tag .name{
    color: #e96900;
  }
  .variable, .attribute, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo {
    color: @hl_amber;
  }
  .number, .preprocessor, .literal, .params, .constant {
    color: @hl_amber;
  }
  .class, .ruby .class .title, .css .rules .attribute {
    color: #ffcc66;
  }
  .string, .value, .inheritance, .header, .ruby .symbol, .xml .cdata {
    color: @color_md_green;
  }
  .css .hexcolor {
    color: #66cccc;
  }
  .function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title {
    color: #6699cc;
  }

}
.html{
  .tag .name{
    color: @hl_red;
  }
}

//代码块复制按钮
.highlight{
    //方便copy代码按钮（btn-copy）的定位
    position: relative;
}
.btn-copy {
    display: inline-block;
    cursor: pointer;
    background-color: #FCFCFC;
    background-image: linear-gradient(#fcfcfc,#eee);
    border: 1px solid #d5d5d5;
    border-radius: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: #666;
    padding: 2px 6px;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0;
    .enable-trans();
    &:hover{
      color: #444;
    }
}
.btn-copy span {
    margin-left: 5px;
}
.highlight:hover .btn-copy{
    opacity: 1;
}
